<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="referrer" content="no-referrer" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1,
            maximum-scale=1,
            minimum-scale=1, user-scalable=no"
    />
    <link rel="stylesheet" href="./assest/style/reset.css" />
    <link rel="stylesheet" href="./assest/style/font/iconfont.css" />
    <link rel="stylesheet" href="./assest/style/common.css" />
    <link rel="stylesheet" href="./assest/style/Footer.css" />
    <link rel="stylesheet" href="./assest/style/discover.css" />
    <title>发现</title>
  </head>

  <body>
    <header class="flex jc-sa aic bg-fff" style="height: 50px">
      <span class="cursor h100p flex aic jc-c f16 active">推荐•路线</span>
      <span class="cursor h100p flex aic jc-c f16">精品•美墅</span>
      <span class="cursor h100p flex aic jc-c f16">优惠•活动 </span>
    </header>

    <ul class="discover-index" id="discover">
      <li class="item lh15 pl-10 pr-10 bg-fff flex">
        <img
          src="./assest/img/discover/10001.jpg"
          alt=""
        />
        <p class="pt-15 pl-15 pr-15">
          最攻略 | 广东摘果地图！葡萄、百香果、无花果... 周末马上走起！
        </p>
      </li>
      <li class="item lh15 pl-10 pr-10 bg-fff flex">
        <img
        src="./assest/img/discover/10002.jpg"
          alt=""
        />
        <p class="pt-15 pl-15 pr-15">
          最攻略 | 广东摘果地图！葡萄、百香果、无花果... 周末马上走起！
        </p>
      </li>
    </ul>

    <!-- <ul class="footer fixed aic flex jc-sa">
      <a class="fdc aic" href="./house.html">
        <span class="iconfont f22 icon-shouye"></span>
        <span class="mt-5 f12">首页</span></a
      >
      <a class="fdc aic" href="/target">
        <span class="iconfont f20 icon-map"></span>
        <span class="mt-5 f12">目的地</span>
      </a>
      <a class="fdc aic" href="./demand.html">
        <span class="iconfont f22 base icon-htmal5icon18"></span>
        <span class="mt-5 f12">提交需求</span>
      </a>
      <a class="fdc aic active" href="discover.html">
        <span class="iconfont f22 icon-faxian"></span>
        <span class="mt-5 f12">发现</span>
      </a>
      <a class="fdc aic" href="./my.html">
        <span class="iconfont f22 icon-wode"></span>
        <span class="mt-5 f12">我的</span>
      </a>
    </ul> -->

    <script src="./js/axios.js"></script>
    <script src="./js/jQuery.js"></script>
    <script src="./js/common.js"></script>
    <script>
      // 声明一个全局变量,存放数据
      var faxianList = [];
      var faxianObj = {
        // 绑定事件
        bindEvents() {
          $("header span").on("click", function () {
            // this指向了你点击的元素
            $(this).addClass("active").siblings().removeClass("active");
            // 拼接kind
            var kind = "0" + ($(this).index() + 1);
            // 根据kink过滤数据
            var newList = faxianList.filter(function (item) {
              return item.kind === kind;
            });
            // 重新渲染列表
            faxianObj.render(newList);
          });
        },

        // 获取列表数据
        getList() {
          var url = "http://localhost:3000/discover";
          axios
            .get(url)
            .then(function (res) {
              // 第一次渲染, 只渲染kind=01的数据
              var list = res.data.filter(function (item) {
                return item.kind === "01";
              });
              faxianObj.render(list);
              // 把数据放入全局变量faxianList存储起来, 给后面的函数使用
              faxianList = res.data;
            })
            .catch(function (err) {
              console.log("请求失败", err);
            });
        },
        // 渲染列表
        render(list) {
          var htmlStr = "";
          list.forEach(function (item) {
            htmlStr += ` <li class="item lh15 pl-10 pr-10 bg-fff flex">
                        <img src="./assest/img/${item.imageUrl}" alt="" style="height:100px;width:100px;flex-shrink:0;">
                        <p class="pt-15 pl-15 pr-15">${item.title}</p>
                    </li>`;
          });
          $("#discover").html(htmlStr);
        },
      };
      faxianObj.bindEvents();
      faxianObj.getList();
    </script>
  </body>
</html>
